<template>
  <div class="orderContent">
    <div class="bottomInfo">
      <div>
         <span class="orderCode">{{orderItem.orderText ? orderItem.orderText : '订单编号：'}}<span class="text">{{orderItem.orderSn}}</span></span>
         <span v-show='orderItem.num' class="orderTime">当前期数：<span class="text periods">{{orderItem.num && orderItem.num}}/{{orderItem.hirePuchaesNum}}</span></span>
         <span class="orderTime">{{orderItem.timeText ? orderItem.timeText : '下单时间：'}}<span class="text">{{orderItem.createdAt | formatTime }}</span></span>
         <span class="orderTime" v-if="orderItem.isShowOverdue && orderItem.closeDate">第{{orderItem.itemIndex}}期最晚还款时间：<span class="text">{{orderItem.closeDate | formatTime }}</span></span>
      </div>
    </div>
    <div class="order">
      <div class="orderName">
        <p>{{orderItem.pack.name}}</p>
      </div>
      <!-- <div class="orderCourse">
        <div class="listWrapper">
          <p v-for="(course, index) in orderItem.pack.courses" :key="index+'course'">
            {{ course.name }}
            <span class="dachedLine"></span>
          </p>
        </div>
      </div> -->
      <div class="orderPrice">¥ {{(orderItem.totalPrice*1).toFixed(2)}}</div>
      <div class="orderPay">¥ {{(orderItem.totalPayPrice*1).toFixed(2)}}</div>
      <div class="orderStatus" :class="{red: orderItem.orderStatus === 'f2'}">
        <div class="isHireText" v-if='orderItem.isHireText'>{{orderItem.isHireText}}</div>
        <div v-if='!orderItem.showStages'>
          {{computeState(orderItem.orderStatus, orderItem.orderSn, orderItem.id).status}}
        </div>
        <div class="nowStages" v-if="orderItem.nowStages">
          当前期数：<span class="text">{{orderItem.nowStages}}期</span>
        </div>

        <div v-if="orderItem.payOff" class="payOff">{{orderItem.payOff}}</div>
        <div v-if='computeState(orderItem.orderStatus, orderItem.orderSn, orderItem.id).payOff' class="payOff finish">{{computeState(orderItem.orderStatus, orderItem.orderSn, orderItem.id).payOff}}</div>

        <div v-if="orderItem.orderStatus == 0 " class="time-out">
          <div>
            倒计时 {{hour}}:{{minute}}:{{second}}
          </div>
        </div>
      </div>
      <div class="orderOperate">
        <div class="operateBtn">
          <a @click.once="countConsult" v-if='((orderItem.orderStatus === "f2") || (orderItem.orderStatus === "8")) && !orderItem.isHire' class="main" :href="`http://wpa.qq.com/msgrd?v=3&uin=${QQNum}&site=qq&menu=yes`" target="_blank">联系管理员</a>
          <router-link v-if='(orderItem.orderStatus !== "f2") && (orderItem.orderStatus !== "8") && orderItem.showNum != "2"' :to="computeState(orderItem.orderStatus, orderItem.orderSn, orderItem.pack.id).goto" v-show="computeState(orderItem.orderStatus, orderItem.orderSn).name"
            class="main">{{ computeState(orderItem.orderStatus).name }}</router-link>
          <!-- <button v-show="computeState(orderItem.orderStatus).name" class="main">{{ computeState(orderItem.orderStatus).name }}</button> -->
          <a class="sub" @click="orderCloseFn(orderItem.id)" v-show='computeState(orderItem.orderStatus).subBool===0'>关闭订单</a>
          <a class="sub" @click="orderDeleteFn(orderItem.id)" v-show='computeState(orderItem.orderStatus).subBool===1'>删除订单</a>
          <a v-show='computeState(orderItem.orderStatus).checkBool && computeState(orderItem.orderStatus).status !="分期还款已还清" && computeState(orderItem.orderStatus).status !="分期款逾期" && orderItem.nowStages' @click='gotoPay(orderItem.id,orderItem.pack.id)' class="main">立即还款</a>
          <a class="sub check" @click="gotoStages(orderItem.id)" v-show='computeState(orderItem.orderStatus).checkBool'>查看分期详情</a>
        </div>
      </div>
    </div>
    <div class="includeCourse">
      包含课程:<div class="courseContentz"><span class="courseContent" v-for="(course, index) in orderItem.pack.courses" :key="index+'course'">{{ course.name }}</span></div>
    </div>
  </div>

</template>
<script>
import  {getMinusTime, instalOrderById, statisticsSave} from 'api/getData'
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'order-list',
  props: {
    orderItem: Object
  },
  data() {
    return {
      statusNum: true,
      hour: 0,
      minute: 0,
      second: 0,
      init: '',
      serverTime: 0,
      outTime: 0
    }
  },
  created() {
    
    // console.log(this.orderItem)
  },
  computed:{
    ...mapGetters(['currentUser', 'cityId', 'cityName', 'QQNum'])
  },
  mounted() {

    if(this.orderItem.orderStatus == 0){
      this.minusTime()
    }
    // if(this.statusNum){
    //   if(this.orderItem.orderStatus === 'f2' || this.orderItem.orderStatus === 'f0'){
    //     this.statusNum = false
    //     this.orderItem.showBool = false
    //   } else {
    //     this.orderItem.showBool = true
    //   }
    // } else {
    //   this.orderItem.showBool = true
    // }

  },
  methods: {
    //倒计时
    minusTimeCount(outTime) {
      //let now = new Date().getTime();
      let h = 0, m = 0, s = 0;
      let outTotal = outTime - this.serverTime;
      h = parseInt(outTotal/1000/60/60)
      m = parseInt(outTotal/1000/60%60)
      s = parseInt(outTotal/1000%60)
      h < 10 ? this.hour = '0'+h : this.hour = h;
      m < 10 ? this.minute = '0'+m : this.minute = m;
      s < 10 ? this.second = '0'+s : this.second = s;
    },
    minusTime() {
      this.outTime = this.orderItem.createdAt+1000*60*60*24;
      getMinusTime()
        .then(res =>{
          if(res.code == 0){
            this.serverTime = res.data.currentTime
            setTimeout(this.minusTimeCount(this.outTime),0)
            this.serverTime += 1000;
            this.init = setInterval(() => {
              if(this.outTime < this.serverTime){
                clearInterval(this.init)
                this.$emit('reload')
                //this.$set(this.orderItem, 'orderStatus', '1')
                //this.$forceUpdate()
              }
              this.minusTimeCount(this.outTime)
              this.serverTime += 1000;
            }
            ,1000)
          }
        })
        .catch(err => {

        })
    },
    countConsult(){
      let userId = this.currentUser && this.currentUser.cluesOrStuId || '',
        account = this.currentUser && this.currentUser.account || '',
        cityId = this.cityId && this.cityId || '',
        cityName = this.cityName && this.cityName || ''

      statisticsSave(cityId, cityName, userId, account)
    },
    // 关闭订单
    orderCloseFn(id) {
      this.$emit('orderClose', id)
    },
    // 删除订单
    orderDeleteFn(id) {
      this.$emit('orderDelete', id)
    },
    // 连接到分期函数
    gotoStages(orderId) {
      this.$router.push({
        path: 'orderDetails',
        query: {
          orderId: orderId
        }
      })
    },
    gotoPay(id,pid){
      let that = this;
      instalOrderById(id).then(res=>{
        let msg = res.data.msg.reverse()
        msg.map(item =>{
          if(item.hireStatus == '0'){
            this.$router.push({
            path: '/payDetails',
            query: {
              orderSn: item.hireSn,
              requestBool: '1',
              courseId: that.orderItem.pack.id
            }
          })
          }
        })
      })
    },
    // 订单状态过滤
    computeState(status, order, id) {
      let that = this;
      switch (status) {
        case '0':  
          return {
            status: '待支付...',
            name: '去支付',
            className: 'blue',
            url: '',
            subBool: 0,
            checkBool: false,
            goto: {
              path: '/payDetails',
              query: {
                orderSn: order,
                requestBool: '0',
                courseId: that.orderItem.pack.id
              }
            }
          }

        case '1':
          return {
            status: '订单关闭',
            name: '重新购买',
            className: 'blue',
            url: '',
            subBool: 1,
            checkBool: false,
            goto: {
              path: '/courseDetail',
              query: {
                detailId: id
              }
            }
          }

        case '2':
          return {
            status: '付款成功',
            name: '',
            className: 'green',
            url: '',
            subBool: 2,
            checkBool: false,
            goto: {
              path: '',
              query: {
                courseId: id
              }
            }
          }

        case '3':
          return {
            status: '分期审核中...',
            name: '提交资料',
            className: 'blue',
            url: '',
            subBool: 2,
            checkBool: true,
            goto: {
              path: '',
              query: {
                courseId: id
              }
            }
          }

        case '4':
          return {
            status: '审核未通过',
            name: '重新提交',
            className: 'red',
            url: '',
            subBool: 2,
            checkBool: true,
            goto: {
              path: '',
              query: {
                courseId: id
              }
            }
          }

        case '5':
          return {
            status: '待支付分期款...',
            name: '',
            className: 'blue',
            url: '',
            subBool: 2,
            checkBool: true,
            goto: {
              path: '',
              query: {
                courseId: id
              }
            }
          }

        case '6':
          return {
            status: '待支付分期款...',
            name: '',
            className: 'green',
            url: '',
            subBool: 2,
            checkBool: true,
            goto: {
              path: '',
              query: {
                courseId: id
              }
            }
          }

        case '7':
          return {
            status: '',
            name: '',
            payOff: '所有款项已还清',
            className: 'green',
            url: '',
            subBool: 2,
            checkBool: true,
            goto: {
              path: '',
              query: {
                courseId: id
              }
            }
          }

        case '8':
          return {
            status: '分期款逾期',
            name: '通知管理员',
            className: 'red',
            url: '',
            subBool: 2,
            checkBool: true,
            goto: {
              path: '',
              query: {
                courseId: id
              }
            }
          }
        case '9':
          return {
            status: '',
            name: '',
            className: '',
            url: '',
            subBool: 2,
            checkBool: false,
            goto: {
              path: '',
              query: {
                courseId: id
              }
            }
          }
        case 'f0':
          return {
            status: '待支付...',
            name: '立即去支付',
            className: 'blue',
            url: '',
            subBool: 2,
            checkBool: false,
            goto: {
              path: '/payDetails',
              query: {
                orderSn: order,
                requestBool: '1',
                courseId: that.orderItem.parentPack.id
              }
            }
          }
        case 'f1':
          return {
            status: '已还清',
            name: '',
            className: 'blue',
            url: '',
            subBool: 2,
            checkBool: false,
            goto: {
              path: '/payDetails',
              query: {
                orderSn: order
              }
            }
          }
        case 'f2':
          return {
            status: '已逾期',
            name: '联系管理员',
            className: 'blue',
            url: '',
            subBool: 2,
            checkBool: false,
            goto: {
              path: '/payDetails',
              query: {
                orderSn: order
              }
            }
          }
        // 没有default
      }
    },
  },
  watch: {
    orderItem() {
      if(this.orderItem.orderStatus != 0  && this.init != ''){
        console.log('clearIntervaled')
        clearInterval(this.init)
      }
    }
  },
  filters: {
    formatTime(timeData) {
      // console.log('timeData:',timeData)
      if(!timeData){
        return '毕业后还款'
      }
      let data, YY, MM, DD, hh, mm, ss,
        that = this,
        addZero = n => n < 10 ? '0' + n : '' + n;

      data = new Date(timeData * 1)
      YY = data.getFullYear()
      MM = addZero(data.getMonth() + 1)
      DD = addZero(data.getDate())
      hh = addZero(data.getHours())
      mm = addZero(data.getMinutes())
      ss = addZero(data.getSeconds())
      return `${YY}-${MM}-${DD}  ${hh}:${mm}:${ss}`
    }
  }
}

</script>
<style lang="stylus" scoped>
@import '~style/base.styl';
.time-out{
  padding-top: 10px;
  color: $color-person-btn;
}
.orderContent {
  background:rgba(255,255,255,1);
  .order {
    // @extend .clear-fix;
    // height: 200px; $color-myOrder-border
    display: table;
    width: 100%;
  
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;

    > div {
      display: table-cell;
      // float: left;
      width: 16.66753%;
      // height: 200px;
      text-align: center;
      padding: 20px 12px 20px 12px;
      font-size: $font-size-medium;
      color: $color-myOrder-text;
      line-height: 20px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
      -o-box-sizing: border-box;
      box-sizing: border-box;

      p {
        @extend .clear-default;
      }
    }
    > div + div {
      border-right: none;
    }
    .listWrapper{
      p{
        background:rgba(242,242,242,1);
        line-height: 24px;
        margin-bottom: 20px;
        padding: 10px;
      }  
    }
    > div:first-child {
      border-right: none;
      width:32%
    }

    .orderPrice {
      color: #767676;
      // font-size: $font-size-large;
    }

    .orderPay {
      color: $color-person-btn;
    }

    .orderStatus {
      color: $color-text-m;
      // font-size: $font-size-large;
      .nowStages{
        font-size: $font-size-medium
        .text{
            color: $color-person-btn
          }
      }
      .isHireText{
        color: $color-person-btn
      }
      .payOff{
        height: 20px;
        width: 84px;
        background-color: $color-pay-off;
        font-size: $font-size-small;
        color: $color-text;
        margin:15px auto 0;
      }
      .finish{
        width: 96px;
      }
    }

    .red {
      color: $color-person-btn;
    }

    .orderOperate {
      line-height: 20px;

      .operateBtn {
        line-height: 20px;

        // margin-top: 85px;
        button {
          width: 88px;
          height: 32px;
        }
        .check{
            width: 118px;
            height: 32px;
            border: 1px solid #ccc;
            border-radius: 4px;
            line-height: 32px;
            text-align: center;
            margin-top: 8px;
            &:hover{
              background-color: $color-person-btn;
              color: #fff;
              border: 1px solid #fff;
              }
          }

        .main {
          display: inline-block;
          width: 116px;
          height: 32px;
          background-color: #FFEFED;
          border: 1px solid $color-person-btn;
          line-height: 32px;
          border-radius: 4px;
          color: $color-sub-pay;
          text-decoration: none;
          text-decoration: none color $color-sub-pay;
          cursor: pointer;
          outline: none;

          &:hover {
            background-color: $color-person-btn;
            color: $color-text;
          }
        }

        .sub {
          display: block;
          margin: 20px auto;
          color: #767676;
          font-size: $font-size-medium;
          cursor: pointer;

          &:hover {
            text-decoration: none;
          }
        }
      }
    }
  }

  .bottomInfo {
    height: 64px;
    line-height: 64px;
    font-size: $font-size-medium;
    color: $color-text-l;
    padding-left: 20px;
    border-bottom:1px solid $color-person-bg;

    > div {
      height: 100%;
      color: $color-person-text;

      > span + span {
        margin-left: 85px;
      }
    }

    .text {
      color: $color-background;
    }

    .periods {
      color: $color-person-btn;
    }
  }
  
  .includeCourse
  {
    width: 100%;
    /* min-height: 64px; */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    /* align-items: center; */
    text-indent: 20px;
    background: #fff;
    border-radius: 4px 4px 0px 0px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #a4a4a4;
    border-top: 1px solid #f5f5f5;
    line-height: 24px;
    padding: 25px 0;
    .courseContentz
    {
      width:90%;
      text-indent:0
      .courseContent
      {
        font-size:14px;
        color:rgba(32,32,32,1);
        margin-left:10px
      }
    }
  }
}
.orderContent + .orderContent{
  margin-top: 30px;
}
.orderCode{
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
}
</style>
